<template>
	<view class="layout">
	    <view>
		<uni-search-bar @confirm="search" @input="input" v-model="parent.tags" @clear="clear" @cancel="clear" focus></uni-search-bar>
		</view>
	<view v-show="!Searchdata.length">
		<view class="histor" v-if="tags.length" >
			<view class="hot">
				<view class="title">最近搜索</view>
				<view @click="deleteTag()">
					<uni-icons type="trash" size="30"></uni-icons>
				</view>
			</view>
			<view class="histor_item">
				<view v-for="item in tags" class="item" @click="tag(item)" :key="item">
					{{item}}
				</view>
			</view>
		</view>
		<!-- <uv-empty v-else mode="search" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty> -->
		<view class="histor">
			<view class="hot">
				<view class="title">热门搜索</view>
			</view>
			<view class="histor_item">
				<view v-for="item in hotTag" class="item" @click="tag(item)" :key="item">
					{{item}}
				</view>
			</view>
		</view>
	</view>
		<view  class="searchimg">
			<view class="item_img" v-for="item in Searchdata" @click="navbarto(item._id)">
				<image class="item" :src="item.smallPicurl"></image>
			</view>
		</view>
		<uv-empty  v-if="!Searchdata.length" mode="search" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
		<uni-load-more v-if="islod" status="noMore"></uni-load-more>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {RequestSearchWall} from '../../apis/apis.js'
import {onReachBottom} from '@dcloudio/uni-app'
 let  tags = ref(uni.getStorageSync('tagslist') || [])
 let  hotTag=ref(['明星','美女','动漫','动物','AI绘画','自然风光','文字图案','运动体育'])
 let  Searchdata=ref([])
 let  islod=ref(false)
 let  parent=ref({
	   tags:'',
	   pageNum:1,
	   pageSize:12,
 })
 let  total
 // 清空搜索历史
 function deleteTag(){
	 console.log('删除记录');
	 uni.showModal({
	 	title:'提示',
		content:'确定清空搜索历史记录吗',
		success: (res) => {
			if(res.confirm){
				tags.value=[]
				uni.clearStorageSync('tagslist')
			}
		}
	})
 }
 
 
 function tag(item){
	 init(item)
	 console.log('历史记录');
	 // parent.value.tags=item
	 console.log(tags.value);
	search()
 }
 function search(){
	 tags.value=[...new Set([parent.value.tags,...tags.value])].slice(0,11)
     uni.setStorageSync('tagslist', tags.value)
	 init(parent.value.tags)
	 getSearch()
 }
 
 // 初始化
function init(value=''){
	 Searchdata.value=[]
	 parent.value={
	 	   tags:value,
	 	   pageNum:1,
	 	   pageSize:12,
	 }
 }
 function input(){
	 // console.log("12");
 }
 
 // 调接口获取数据
async function getSearch(){
	uni.showLoading({
			title: '加载中',
			mask:true
		})
	 let res = await RequestSearchWall({keyword:parent.value.tags})
	 console.log(res)
	 total=res.data.total
	 Searchdata.value=[...Searchdata.value,...res.data.data]
	
	 uni.hideLoading()
	 
 }
 // 下拉刷新
onReachBottom(()=>{
	if(parent.value.pageNum*parent.value.pageSize >=total){
		uni.showToast({
			title: '没有更多数据了...',
			icon:'none',
			duration:1000
		});
		 islod.value=true
	}else{
		uni.showLoading({
				title: '加载中',
				mask:true
			})
			parent.value.pageNum++
			getSearch()
	}
})
// 点击图片跳转到图片预览 
function navbarto(id){
	console.log(id);
	// 图片预览需要用到缓存 还要传递id
	 uni.setStorageSync("classifyimgstorage",Searchdata.value)
	uni.navigateTo({
		url:"/pages/ImgView/ImgView?id="+id
	})
	
}
// 清空输入框以及初始化
function clear(){
	init()
}
</script>

<style lang="scss" scoped>
.layout{
	width: 750rpx;
	// background-color: lawngreen;
	.histor{
		margin: 30rpx;
		.hot{
		display: flex;
		justify-content: space-between;
		align-items: center;
			.title{
				font-size: 40rpx;
			}
	    }
		.histor_item{
			.item{
				display: inline-block;
				background-color: rgba(0, 0, 0, 0.3);
				width: 150rpx;
				height: 50rpx;
				border-radius: 60rpx;
				line-height: 50rpx;
				text-align: center;
				margin: 10rpx;
				font-size: 27rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 10rpx;
			}
		}
		
	}
	.searchimg{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 15rpx;
		margin: 30rpx;
		.item_img{
			height: 430rpx;
			border-radius: 10rpx;
			overflow: hidden;
			.item{
			width: 100%;
			height: 100%;
			display: block;
		    }
		}
	}
	
}

</style>
